<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8" />  
    <title>Pie Chart Demo</title>  
</head>  
<body>  
    <canvas id="circle" width="1200" height="600">Your browser does not support Canvas, please upgrade it!</canvas>  
</body>

<script type="text/javascript">  
var color = ["blue","red","green","purple"];
var data = [25,30,15,30];
var text = ["First Quarter", "Second Quarter", "Third Quarter", "Fourth Quarter"];
var Cx = 100
var offset = 400
  
function drawCircle(canvasId, data, color, text, Cx){
	// Get canvas id
    var canvas = document.getElementById("circle");
	// Get context
    var context = canvas.getContext("2d");
	// Start line is +y axis
    var startPoint = 1.5 * Math.PI;
	// Set radius
	var radius = 100;
	// Center x,y
	var Cy = 120;
	// Sample Width
    var width = 20
	var height = 10
    // Sample Location
    var posX = Cx + radius + 20;
	var posY = width;
	// Text Location
    var textX = posX + width + 5;
	var textY = posY + 10;
 
    for(var i=0;i<data.length;i++){
	    // Draw pie
        context.fillStyle = color[i];  
        context.strokeStyle = color[i];  
        context.beginPath();  
        context.moveTo(Cx,Cy);
        context.arc(Cx,Cy,radius,startPoint,startPoint+Math.PI*2*(data[i]/100),false);  
        context.fill();  
        context.stroke();  
        startPoint += Math.PI*2*(data[i]/100);
		
		// Draw the sample
		context.fillRect(posX, posY + 20 * i, width, height);
        context.moveTo(posX, posY + 20 * i);
        context.font = 'bold 12px Arial';
        var percent = text[i] + ' : ' + data[i] + '%';
        context.fillText(percent, textX, textY + 20 * i);
    }  
}

drawCircle("circle", data, color, text, Cx);
drawCircle("circle", data, color, text, Cx+offset);
drawCircle("circle", data, color, text, Cx+offset*2);
</script> 

</html>